<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>MagicTags Sample</title>
		<!-- jquery -->
		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
		<!-- YUI test framework -->
		<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.7.0/build/logger/assets/skins/sam/logger.css&2.7.0/build/yuitest/assets/skins/sam/yuitest.css"> 
		<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.7.0/build/yahoo-dom-event/yahoo-dom-event.js&2.7.0/build/logger/logger-min.js&2.7.0/build/yuitest/yuitest-min.js"></script> 
		<!-- source file -->
		<script type="text/javascript" src="js/jquery.magictags.js"></script>
		<!-- test file -->
		<script type="text/javascript" src="js/magictagsTEST.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				

			});
			
//			$(".magictags a.selected").live("click", function(){
//				console.log("changed");
//			});
			
		</script>
		<link rel="stylesheet" href="css/magictags.css"></link>
	</head>
	<body>
		<div id="testground">
		<!--<h4>Tag Set One</h4>-->
		<ul id="magictagsSetOne" class="magictags">
			<li class="mtagcontrol-filter">filter by</li>
			<li><span><a href="#" id="flextag" class="mtagcontrol mtag-adobe-flex">Adobe Flex</a></span></li>
			<li><span><a href="#" id="javascript-test" class="mtagcontrol mtag-javascript">Javascript</a></span></li>
			<li><span><a href="#" id="django-test" class="mtagcontrol mtag-django">Django</a></span></li>
			<li><span><a href="#" id="setOneImportant" class="mtagcontrol mtag-important">Important</a></span></li>
			<li class="mtagcontrol-clear"><span><a href="#" class="mtagcontrol mtagcontrol-clear">X</a></span></li>
		</ul>
		
		<div id="taggedItemsSetOne">
			<div class="magictagsSetOne mtagged mtag-javascript">This is tagged with: Javascript</div>
			<div class="magictagsSetOne mtagged mtag-adobe-flex">This is tagged with: Adobe Flex</div>
			<div class="magictagsSetOne mtagged mtag-django">This is tagged with: Django</div>
			<div class="magictagsSetOne mtagged" id="not-tagged-item">This is NOT tagged</div>
			<div class="magictagsSetOne mtagged mtag-django mtag-adobe-flex mtag-javascript">This is tagged with: Django, Adobe Flex, and Javascript</div>
			<div class="magictagsSetOne mtagged mtag-django mtag-javascript">This is tagged with: Django and Javascript</div>
			<div class="magictagsSetOne mtagged mtag-adobe-flex mtag-javascript">This is tagged with: Adobe Flex and Javascript</div>
			<div class="magictagsSetOne mtagged mtag-adobe-flex mtag-django mtag-important">This is tagged with: Adobe Flex and Django and IMPORTANT</div>
		</div>
		
		<br/><br/>
		
		<!--<h4>Tag Set Two</h4>-->
		<ul id="magictagsSetTwo" class="magictags">
			<li class="mtagcontrol-filter">filter by</li>
			<li><span><a href="#" id="plums-test" class="mtagcontrol mtag-plums">Plums</a></span></li>
			<li><span><a href="#" id="grapes-test" class="mtagcontrol mtag-grapes">Grapes</a></span></li>
			<li><span><a href="#" class="mtagcontrol mtag-apples">Apples</a></span></li>
			<li><span><a href="#" id="setTwoImportant" class="mtagcontrol mtag-important">Important</a></span></li>
			<li class="mtagcontrol-clear"><span><a href="#" id="setTwoClear" class="mtagcontrol mtagcontrol-clear">X</a></span></li>
		</ul>
		
		<div id="taggedItemsSetTwo">
			<div class="magictagsSetTwo mtagged mtag-plums">This is tagged with: Plums</div>
			<div class="magictagsSetTwo mtagged mtag-grapes">This is tagged with: Grapes</div>
			<div class="magictagsSetTwo mtagged mtag-apples">This is tagged with: Apples</div>
			<div class="magictagsSetTwo mtagged" id="not-tagged-item">This is NOT tagged</div>
			<div class="magictagsSetTwo mtagged mtag-plums mtag-grapes mtag-apples">This is tagged with: Plums, Grapes, and Apples</div>
			<div class="magictagsSetTwo mtagged mtag-apples mtag-grapes">This is tagged with: Apples and Grapes</div>
			<div class="magictagsSetTwo mtagged mtag-plums mtag-grapes">This is tagged with: Plums and Grapes</div>
			<div class="magictagsSetTwo mtagged mtag-plums mtag-apples mtag-important">This is tagged with: Plums and Apples and IMPORTANT</div>
		</div>
		
		<!--
		<h4>Items tagged by both Tag Sets</h4>
		<div id="taggedItemsBothSets">
			<div class="magictagsSetOne magictagsSetTwo mtagged mtag-javascript mtag-important">This is tagged with: Javascript, Important</div>
			<div class="magictagsSetOne magictagsSetTwo mtagged mtag-grapes mtag-adobe-flex">This is tagged with: Adobe Flex and Grapes</div>
			<div class="magictagsSetOne magictagsSetTwo mtagged mtag-apples mtag-django">This is tagged with: Django and Apples</div>
		</div>
		-->
		
	</div><!--/testground-->
	</body>
</html>